<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<div id="area"></div>

<input type="button" value="连接" onClick="link()">

<input type="button" value="断开" onClick="dis()">

<input type="text" id="text">

<input type="button" value="发送" onClick="send()">

</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
// function link(){
        // var url='ws://talk.zmhit.com:9501';
        // var url='/client.php';  var exampleSocket = new WebSocket("ws://0.0.0.0:9501");
  		var socket = new WebSocket("ws://127.0.0.1:9503");
        // socket = new WebSocket(url);
        socket.onopen=function(){log1('连接成功')}
        socket.onmessage=function(msg){
        	console.log(msg);
        	log(msg.data);console.log(msg);
        }
        socket.onclose=function(){log1('断开连接')}
    

    function dis(){
        socket.close();
        socket=null;
    }

    function log1(var1) {
        $('#area').append(var1+'\r\n');
    }
    function log(var1){
      var  v=$.parseJSON(var1)
        $('#area').append('用户'+v['no']+'说:'+v['msg']+'\r\n');
    }

    function send(){
        var text=$('#text').val();
        socket.send(text);
    }

    function send2(){
        var json = JSON.stringify({'type':'php','msg':$('#text2').attr('value')})
        socket.send(json);

    }
</script>
</html>